<template>
  <x-header class="head-input" :left-options="{showBack: false}">
    <div class="an-top-input">
      <x-icon type="ios-search" size="27" class="input-ico"></x-icon>
      <input />
      <x-icon type="android-expand" size="27" class="ico-left"></x-icon>
    </div>
  </x-header>
</template>

<script>
  import { XHeader } from 'vux'
    export default {
      name: "head-input",
      components: {
        XHeader,
      },
    }
</script>

<style lang="less">
  .head-input{
    color: #909399;
    background-color: #F7F7FA !important;
    &.vux-header{
      .vux-x-icon{
        fill:#909399;
      }
      .vux-header-title{
        margin: 0 10px;
      }
      .vux-header-left{
        left: 10px;
        top:13px;
      }
      .vux-header-right{
        right: 10px;
        top:13px;
      }
    }
    .an-top-input{
      width: 100%;
      height: 35px;
      line-height: 35px;
      margin-top: 2px;
      border-radius: 5px;
      overflow: hidden;
      background-color: #DCDFE6;
      position: relative;
      .input-ico{
        position: absolute;
        left: 5px;
        top:5px;
      }
      .ico-left{
        position: absolute;
        right:5px;
        top:5px;
      }
      input{
        width: 80%;
        height: 30px;
        border: none;
        outline:none;
        background:transparent;
        :focus{
          outline: none;
        }
      }
    }
  }
</style>
